<template>
  <div
    ref="node"
    :class="{
      'node-container': true
    }"
    :style="_nodeContainerStyle"
  >
    12
  </div>
</template>

<script>
export default {
  props: {
    nodeInfo: {
      // 节点信息
      type: Object,
      default: () => ({})
    },
    activeElement: {
      // 激活的节点信息
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },

  computed: {
    // 节点容器样式
    _nodeContainerStyle() {
      return {
        top: this.nodeInfo.top,
        left: this.nodeInfo.left
      }
    },

    /* icon class*/
    _nodeIcoClass() {
      return {
        [this.nodeInfo.icon]: true,
        'flow-node-drag': !this.nodeInfo.viewOnly // 添加该class可以推拽连线出来，viewOnly 可以控制节点是否运行编辑
      }
    }
  },
  methods: {
    // 点击节点
    clickNode() {
      this.$emit('clickNode', this.nodeInfo.id)
      console.log(this.nodeInfo)
    },
    // 鼠标移动后抬起
    changeNodeSite(event) {
      console.log('cuowu ', event)
      // 避免抖动
      if (this.nodeInfo.left == this.$refs.node.style.left && this.nodeInfo.top == this.$refs.node.style.top) {
        return
      }
      this.$emit('changeNodeSite', {
        nodeId: this.nodeInfo.id,
        left: this.$refs.node.style.left,
        top: this.$refs.node.style.top
      })
    },

    /* 右击选择*/
    onContextMenu(e) {
      this.$emit('onItemContextMenu', e, 'node', this.nodeInfo)
    },

    /* 双击*/
    onDblclick(e) {
      this.$emit('nodeDblclick', e, 'node', this.nodeInfo)
    }
  }
}
</script>

<style lang="scss" scoped>
.node-container {
  position: absolute;
  display: flex;
  height: 32px;
  //border: 1px solid #e0e3e7;
  border: 1px solid $--color-primary;
  border-radius: 5px;
  background-color: #fff;
  align-items: center;
  cursor: move;
  color: #565758;
  min-width: 140px;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: $--color-primary;
    border-radius: 4px 0 0 4px;
    z-index: 10;
  }
  &--active {
    color: $--color-primary;
    border: 1px dashed $--color-primary;
    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: $--color-primary;
      opacity: 0.1;
    }
  }
  .node__item-icon {
    padding-left: 12px;
    padding-right: 8px;
    cursor: crosshair;
    position: relative;
    display: inline-block;
    &.flow-node-drag {
      &:hover {
        &:before {
          content: '';
          position: absolute;
          width: 12px;
          height: 12px;
          background: #fff;
          top: 50%;
          left: calc(50% + 2px);
          border-radius: 50%;
          border: 1px solid $--color-primary;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .node__item-text {
    flex: 1;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5px;
  }
  .node__item-rt-icons {
    padding: 0 10px;
    cursor: default;
    i:nth-child(1) {
      color: #84cf65;
    }
    i:nth-child(2) {
      color: #f56c6c;
    }
    i:nth-child(3) {
      color: #e6a23c;
    }
    i:nth-child(4) {
      color: #84cf65;
    }
  }
}
</style>
